<template>
  <view class="container">
    <header @click="$goPath(1)">
      <image src='/static/images/right-white.png' mode='aspectFit|aspectFill|widthFix' alt="" />
      <view style="padding-left: 6rpx;">设置</view>
    </header>

    <section>
      <view class="sect-box">
        <u-cell v-for="(item, index) in menuList" :title="item.title" @click="handleClick(item)" isLink
          :key="index"></u-cell>
        <u-cell title="当前版本" :value="appVersion"></u-cell>
      </view>
    </section>

    <u-modal :show="confirmVisible" showCancelButton content="确认退出账号?" closeOnClickOverlay @confirm="confirm"
      @cancel="confirmVisible = false"></u-modal>

    <u-modal :show="alertVisible" content="账号注销后，账号被所有资产及订单数据将被永久抹除，请谨慎操作！确认注销账号请联系优品兜客服电话:400-9915775"
      closeOnClickOverlay @confirm="alertVisible = false"></u-modal>

  </view>
</template>
<script>
import { removeToken, removeUserInfo } from '@/common/auth';
export default {
  data() {
    return {
      menuList: [
        { title: '用户协议', link: '/pagesA/pocketShop/mine/userAgreement?type=2' },
        { title: '隐私政策', link: '/pagesA/pocketShop/mine/userAgreement?type=1' },
        { title: '注销账户', link: '' },
        { title: '退出登录', link: '' },
      ],
      confirmVisible: false,
      alertVisible: false,
      appVersion: '1.0.0'
    }
  },

  methods: {
    handleClick(item) {
      if (item.title == '退出登录') {
        this.confirmVisible = true;
        return;
      };
      if (item.title == '注销账户') {
        this.alertVisible = true;
        return;
      }
      this.$goPath(2, item.link)
    },
    //确定退出
    confirm() {
      removeToken()
      removeUserInfo()
      this.$goPath(4, '/pages/pocketShop/mine/login')
    },
  },
  onLoad() {
    this.appVersion = uni.getSystemInfoSync().appVersion;
  },

}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  font-size: 14px;
  font-family: 'PingFang SC-Medium';
  background-color: #FED14E;
  overflow-y: hidden;

  header {
    width: 100%;
    padding: 60px 12px 30px;
    border-radius: 0 0 20px 20px;
    box-sizing: border-box;
    color: #fff;
    background-color: #32B499;
    background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    font-size: 18px;
    font-family: 'PingFang SC-Bold';
    display: flex;
    align-items: center;

    image {
      width: 8px;
      height: 16px;
      display: block;
      margin-right: 3px;
    }
  }

  section {
    height: 90%;
    position: relative;
    top: -25px;
    padding: 0 12px;
    box-sizing: border-box;

    .sect-box {
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 20px 20px 0 0;
      overflow-y: auto;
      padding-top: 24rpx;
    }
  }
}
</style>
